<template>
	<view class="list-container">
		<view class="list">
			<view class="list-item" v-for="(order,index) in listData" :key="order.orderId">
				<view class="list-item-head">
					<view class="order-no" v-if="order.status == 0 || order.status == 40"> <text>订单号：</text> <text>{{order.no}} </text> </view>
					<view class="order-no" v-if="order.status == 10 || order.status == 20 || order.status == 30"> <text>{{order.orchardName}} </text> </view>
					<view class="order-status"> 
						<text v-if="order.status == 0" style="color: #FD5052;"> {{getStatusLabel(order)}} </text> 
						<text v-else> {{getStatusLabel(order)}} </text>
					</view>
				</view>
				<view class="list-item-body">
					<!-- 待支付start -->
					<view class="wait-pay" v-if="order.status == 0 || order.status == 40" @click="goToOrderDetail(order.orderId)">
						<view class="image-list">
							<view v-for="(img, i) in order.spuImages" :key="img" class="img">
								<image v-if="i < 3" style="width: 100%; height: 100%;"
								 :src="img"></image>
							</view>
						</view>
						<view class="total-price">
							<text>总计</text>
							<text style="color: #FD5052;">￥</text>
							<text style="color: #FD5052;">{{getYuanPrice(order.payPrice)}}</text>
						</view>
					</view>
					<!-- 待支付end -->
					<!-- 待发货、已发货、已完成start -->
					<view class="had-pay" v-if="order.status != 40 && order.status != 0" @click="goToOrderItemDetail(order.orderItemId)">
						<view class="order-image"> <image class="img"
								 :src="order.spuImage"></image> </view>
						<view class="order-desc">
							<view class="spu-name"> <text>{{order.spuName}}</text> </view>
							<view class="sku-name"> 
								<text>规格: {{order.sku}}</text> 
								<text>共: {{order.count}} 件</text>
							</view>
							<view class="order-price"> <text>￥</text> <text>{{getYuanPrice(order.payPrice)}}</text> </view>
						</view>
					</view>
					<!-- 待发货、已发货、已完成end -->
				</view>
				<view class="list-item-footer">
					<button style="background-color: #fff;border: none;" v-if="order.status == 10 || order.status == 20 || order.status == 30" size="mini" class="btn after-btn" @click="applyAfter(order)">申请售后</button>
					<button style="background-color: #fff;" plain="true" v-if="order.status == 0" size="mini" class="btn cancel-btn" @click="cancelOrder(order)">取消订单</button>
					<button plain="true" size="mini" class="btn message-btn" open-type="im" data-im-id="dy51ywke7l92">联系客服</button>
					<button plain="true"  v-if="order.status == 10 || order.status == 20 || order.status == 30" size="mini" class="btn buy-btn" @click="buyOnce(order)">再次购买</button>
					<button plain="true"  v-if="order.status == 0" size="mini" class="btn pay-btn" @click="goToPay(order)">去支付</button>
				</view>
			</view>
		</view>
		
	</view>
</template>

<script>
	import $H from '@/common/free-lib/request.js';
	import $U from '@/common/free-lib/util.js';
	
	export default {
		props: {
			listData:{
				type: Array,
				default: () => {
					return []
				}
			},
		},
		data () {
			return {
				statusLabels: [
					{status: 0, label:'待付款'},
					{status: 10, label:'待发货'},
					{status: 20, label:'待收货'},
					{status: 30, label:'已完成'},
					{status: 40, label:'已取消'}
				]
			}
		},
		methods: {
			getStatusLabel(order) {
				let label = '已取消';
				this.statusLabels.forEach(item => {
					if(item.status == order.status) {
						label = item.label;
						return;
					}
				})
				
				if(order.afterSaleStatus != null && order.afterSaleStatus == 10) {
					label = '售后中';
				}
				if(order.afterSaleStatus != null && order.afterSaleStatus == 20) {
					label = '已售后';
				}				
				return label;
			},
			goToOrderItemDetail(id) {
				uni.navigateTo({url: '/pages/mail/order-detail?orderItemId=' + id});
			},
			goToOrderDetail(orderId) {
				uni.navigateTo({url: '/pages/mail/order-detail?id=' + orderId});
			},
			applyAfter(order) {
				if(order && order.orderItemId && (order.status == 10 || order.status == 20 || order.status == 30)) {
					this.$emit('applyAfter', order.orderItemId);
				}
			},
			buyOnce(order) {
				this.$emit('buyOnce', order.spuId);
			},
			cancelOrder(order) {
				if(order && order.orderId && order.status == 0) {
					let _this = this;
					uni.showModal({
						title: '提示',
						content: '确认取消订单？',
						success: function (res) {
							if (res.confirm) {
								_this.$emit('cancel', order.orderId);
							} else if (res.cancel) {								
								return;
							}
						}
					});					
				}
			},
			goToPay(order) {
				if(order && order.orderId && order.status === 0) {
					this.$emit('goToPay', order.orderId);
				}
				else {
					uni.showToast({
						title: '该订单异常不能支付，需要帮助请联系客服！',
						icon: 'none'
					});
				}
			},
			getYuanPrice(price) {
				return $U.fenToYuan(price);
			},
		}
	}

</script>

<style lang="scss" scoped>
	.list-container {
		position: relative;
		width: 100%;
		background-color: #fff;
		.list {
			position:relative;
			width: 720rpx;
			float: left;
			margin-left: 15rpx;
			margin-right: 15rpx;
			.list-item {
				position: relative;
				width: 100%;
				height: auto;
				float: left;
				background-color: #fff;
				margin-top: 10rpx;
				border-radius: 10rpx;
				.list-item-head {
					position: relative;
					width: 100%;
					height: 60rpx;
					line-height: 60rpx;
					padding-top: 20rpx;
					padding-bottom: 20rpx;
					display: block;
					font-weight: 400;
					font-size: 30rpx;
					font-style: normal;
					.order-no {
						float: left;
						padding-left: 20rpx;						
					}
					.order-status {
						float: right;
						padding-right: 20rpx;
					}
				}
				.list-item-body {
					position: relative;
					width: 100%;
					height: auto;
					display: flex;
					align-items: center; /* 垂直居中 */
					.wait-pay {
						width: 100%;
						height: 200rpx;
						padding: 20rpx;
						display: block;
						.image-list {
							float: left;
							padding-left: 10rpx;
							.img {
								width: 150rpx;
								height: 150rpx;
								float: left;
								padding-right: 10rpx;
							}
						}
						.total-price {
							height: 150rpx;
							float: right;
							display: flex;
							align-items: center; /* 垂直居中 */	
							color: #222222;
							font-weight: 400;
							font-size: 28rpx;
							font-style: normal;
						}
					}
					.had-pay {
						width: 690rpx;
						height: 200rpx;
						padding: 20rpx;
						display: flex;
						.order-image {
							float: left;
							padding-left: 10rpx;
							width: 150rpx;
							height: 200rpx;							
							display: flex;
							align-items: center; /* 垂直居中 */
							.img {
								width: 150rpx;
								height: 150rpx;
								float: left;
								padding-right: 10rpx;
							}
						}
						.order-desc {
							width: 540rpx;
							display: table-cell;
							padding-left: 20rpx;
							.spu-name {
								width: 100%;
								height: 100rpx; /* 设置容器高度 */
								float: left;
								display: flex;								
								align-items: center;	
								color: #222222;
								font-weight: 400;
								font-size: 28rpx;
								font-style: normal;
							}
							.sku-name {
								width: 100%;
								float: left;
								height: 50rpx;
								line-height: 50rpx;
								font-weight: 400;
								font-size: 24rpx;
								color: #666666;	
								font-style: normal;
								text-transform: none;
							}
							.order-price {
								width: 100%;
								float: left;
								font-weight: bold;
								font-size: 30rpx;
								color: #FD5052;
								line-height: 80rpx;
								text-align: left;
								font-style: normal;
								text-transform: none;
							}
						}
					}
				}
				.list-item-footer {
					position: relative;
					width: 100%;
					height: 80rpx;
					display: flex;
					justify-content: flex-end;
					align-items: center; /* 子元素垂直居中 */
					text-align: right;
					gap: 8px;
					/deep/ button:after {
						border-radius: 40rpx;
					}
					.btn {
						background-color: #fff;
						border-radius: 40rpx;
						height: 50rpx;
						line-height: 46rpx;
						margin-right: 2px;
						margin-left: 2px;
						padding: 0 10px;
					}
					.after-btn {						
						border-color: #8c8c8c;
						color: #8c8c8c;
					}
					.cancel-btn {
						border-color: #8c8c8c;
						color: #8c8c8c;
					}
					.message-btn {						
						border-color: #8c8c8c;
						color: #8c8c8c;
					}
					.buy-btn {						
						border-color: #FD5052;
						color: #FD5052;
					}
					.pay-btn {						
						border-color: #FD5052;
						color: #FD5052;
					}
				}
			}
			
		}
	}
</style>